<!-- 创建队伍 -->
<template>
	<view class="item-block">
		<view class="one_item">
			<view class="right_info">
				<u--form labelPosition="left" labelWidth='80'>
					<view class="title">
						比赛信息
					</view>
					<u-form-item label="赛事名称" borderBottom ref="item1">
						<u--input v-model="formdata.raceName" border="none"></u--input>
					</u-form-item>
					<u-form-item label="地址" borderBottom ref="item1">
						<u--input v-model="formdata.placeName" border="none"></u--input>
					</u-form-item>
					<u-form-item label="开始时间" borderBottom ref="item1">
						<u--input v-model="formdata.startTime" border="none"></u--input>
					</u-form-item>
					<u-form-item label="参赛团队" borderBottom ref="item1">
						<view class="">
							{{formdata.joinNum}}/{{formdata.teamNum}}支
						</view>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<u--form labelPosition="left" ref="uForm" labelWidth='80' :model="formobj" :rules="rules">
			<view class="two_item">
				<view class="right_info">

					<view class="title">
						队伍信息
					</view>
					<u-form-item label="队伍名称" borderBottom ref="item1" prop="teamName">
						<u--input v-model="formobj.teamName" placeholder="请输入队伍名称" border="bottom"></u--input>
					</u-form-item>
					<u-form-item label="组队方式" borderBottom ref="item1" prop="teamType">
						<uni-section>
							<uni-data-select v-model="formobj.teamType" :localdata="range"
								:clear="false"></uni-data-select>
						</uni-section>
					</u-form-item>
					<u-form-item label="队伍介绍" borderBottom ref="item1" prop="teamDesc">
						<u--textarea v-model="formobj.teamDesc" placeholder="请输入队伍介绍" autoHeight></u--textarea>
					</u-form-item>

				</view>
			</view>
			<view class="three_item">
				<view class="right_info">
					<view class="title">
						队伍标志
					</view>
					<u-form-item label="队伍LOGO" borderBottom ref="item1" prop="teamLogo">
						<view class="upload_item">
							<view class="logo_item" @click="uploadLogo"
								:style="{ backgroundImage: 'url(' + formobj.teamLogo + ')' }">
								<view class="iconfont icon-xiangji">

								</view>
							</view>
							<view class="logo_title">
								点击上传队伍标志
							</view>
						</view>
					</u-form-item>
				</view>
			</view>
		</u--form>
		<view class="bot_item">
			<view class="form-but">
				<u-button type="primary" text="创建并支付" @click="submit"></u-button>
			</view>
			<view class="detail_item">
				<view class="">
					<u-checkbox-group size='18' v-model='checked'>
						<u-checkbox name='1' activeColor="#de3600"></u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="" @click="agreementfn">
					我已阅读<span>ptgolf</span>服务条款和<span>用户协议、隐私政策</span>并同意协议内容
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderid: '',
				formobj: {
					raceId: '',
					teamName: "",
					teamType: "",
					teamDesc: "",
					teamLogo: 'https://web.ptgolf.net/image/webchat/21.png'
				},
				rules: {
					'teamName': {
						type: 'string',
						required: true,
						message: '请填写队伍名称',
						trigger: ['blur', 'change']
					},
					'teamType': {
						type: 'number',
						required: true,
						message: '请选择组队方式',
						trigger: ['blur', 'change']
					},
					'teamDesc': {
						type: 'string',
						required: true,
						message: '请填写队伍介绍',
						trigger: ['blur', 'change']
					},
					'teamLogo': [{
							type: 'string',
							required: true,
							message: '请上传队伍LOGO',
							trigger: ['blur', 'change']
						},
						{
							asyncValidator: (rule, value, callback) => {
								if (value == 'https://web.ptgolf.net/image/webchat/21.png') {
									callback(new Error('LOGO不能为空'));
								} else {
									// 如果校验通过，也要执行callback()回调
									callback();
								}

							},
						}
					]
				},
				formdata: {},
				checked: [],
				range: [{
						value: 1,
						text: "公开"
					},
					{
						value: 2,
						text: "私密"
					},

				],
			}
		},
		created() {},
		onLoad(options) {
			// 从路由参数中获取传递的值			
			this.formobj.raceId = options.id
			this.formdetail()

		},
		mounted() {
			
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			//协议详情
			agreementfn() {
				uni.navigateTo({
					url: `/pages/layout/agreement`,
					events: {
						reverseData: (data) => {
							if (data.data) {
								this.checked = ['1']
							}
						},

					},
				})
			},
			// 表单详情
			formdetail() {
				const that = this
				this.$request(`/race/signDetail/${this.formobj.raceId}`, 'get')
					.then(
						res => {
							that.formdata = res.data.data

						})
			},
			// 提交按钮
			submit() {
				if (this.checked[0] != 1 || this.checked.length == 0) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请勾选用户服务协议",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/top.png',

					})
					return
				}

				this.$refs.uForm.validate().then(res => {
					const that = this
					this.$request(`/race/creatTeam`, 'POST', this.formobj)
						.then(
							res => {
								if (res.data.data.flag) {
									that.orderid = res.data.data.orderId
									that.gopayment()
								} else {
									that.$refs.uToast.show({
										type: 'error',
										message: res.data.data.message,
										iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/top.png',

									})
								}
							})
				}).catch(errors => {
					console.log('校验失败');
				})

			},
			// 支付
			gopayment() {

				const that = this
				const data = {
					id: this.orderid,
					orderType: 1,
				}
				this.$request(`/order/preGenerate`, 'POST', data)
					.then(
						res => {
							uni.requestPayment({
								timeStamp: res.data.data.timeStamp, // 时间戳
								nonceStr: res.data.data.nonceStr, // 随机字符串
								package: res.data.data.packageVal, // 预支付交易会话标识
								signType: res.data.data.signType, // 签名方式
								paySign: res.data.data.paySign, // 签名
								success(res) {
									// 支付成功回调
									that.$refs.uToast.show({
										type: 'success',
										message: "支付成功",
										iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',

									})
									// uni.navigateBack({
									// 	delta: 1
									// });
									const eventChannel = that.getOpenerEventChannel()
									eventChannel.emit('reverseData', {
										data: true
									})

									uni.navigateTo({
										url: '/subpackage1/eventpage/pay_success?id=' + encodeURIComponent(that
											.formobj.raceId)
									});
								},
								fail(res) {
									// 支付失败回调
									that.$refs.uToast.show({
										type: 'error',
										message: "支付失败",
										iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/top.png',

									})
								}
							});
						})
			},
			// 上传图片
			uploadLogo() {
				const that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						// api只支持上传本地图片如果是是网络路径就不进行上传操作
						that.$uploadimg(res.tempFilePaths[0])
							.then((url) => {
								that.formobj.teamLogo = url
							})
							.catch((err) => {
								console.error(err);
							});

					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.item-block {
		height: calc(100vh - 20px);
		background-color: #f4f4f4;
		padding: 10px 20px;

		.one_item {
			height: 203px;

			.right_info {
				// height: 143px;
				padding: 10px;
				background-color: #fff;
				border-radius: 15px;

				.title {
					font-weight: 600;
					margin-bottom: 5px;
				}

				::v-deep .u-line {
					border-bottom-width: 0px !important;
				}

				::v-deep .u-form-item__body {
					border-top: 1px solid #ddd;
					padding: 7px 0 !important;

				}

				::v-deep .u-form-item__body__left__content__label {
					color: #898989;
					font-size: 14px;
				}
			}
		}

		.two_item,
		.three_item {
			margin-top: 10px;

			::v-deep .uni-section-header {
				padding: 0px !important;
			}

			::v-deep .u-textarea {
				border: 1px solid #d6d7d9;
			}

			.right_info {
				padding: 10px;
				background-color: #fff;
				border-radius: 15px;

				.title {
					font-weight: 600;
					padding-bottom: 5px;
					border-bottom: 1px solid #d6d7d9;

				}

				::v-deep .u-line {
					border-bottom-width: 0px !important;
				}




				// ::v-deep 
				::v-deep .u-form-item__body__left__content__label {
					color: #898989;
					font-size: 14px;
				}
			}

			.upload_item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.logo_item {
					margin: 10px 0;
					border-radius: 50%;
					background-size: 100% 100%;
					background-color: #f8f8f8;
					height: 100px;
					width: 100px;
					// background-image: url('https://web.ptgolf.net/image/webchat/21.png');
					// background-size: 100% 100%;
					position: relative;

					.icon-xiangji {
						position: absolute;
						right: 0;
						bottom: 0;
						padding: 5px;
						background-color: #fff;
						border-radius: 50%;
						border: 0.5px solid #ececec;
					}
				}

				.logo_title {
					color: #afafaf;
					font-size: 12px;
				}
			}
		}

		.bot_item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.form-but {
				margin-top: 15px;

				::v-deep .u-button {
					width: calc(100vw - 40px);
					border-radius: 25px;
					border: 0px;
					background-color: #de3600;
					height: 47px;
				}
			}

			.detail_item {
				margin-top: 5px;
				align-items: center;
				margin-bottom: 30px;
				display: flex;
				color: #afafaf;
				font-size: 22rpx;

				span {
					color: #5c79f6;
				}
			}
		}
	}
</style>